<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="test"></div>
    <div>17-18版本的3个钩子函数(含有will的钩子函数除了将要卸载的钩子)
        需要使用unsafe前缀,为啥呢:为了react以后做异步渲染铺路,
        旧的钩子函数存在潜在的问题,
        而18版本就不要该函数了,改名了,加unsafe也没用了
    </div>
    <script src="../lib2/react.development.js"></script>
    <!-- //引入核心库 -->
    <script src="../lib2//react-dom.development.js"></script>
    <!-- //支持react的dom操作 -->
    <script src="../lib/babel.min.js"></script>
    <!-- lib2中的babel版本太高了 -->
    <script type="text/babel">
      class MyComponent extends React.Component{
          state={
              a:1
          }
        UNSAFE_componentWillMount(){
              console.log('被加载了')
          }
          componentDidMount(){
              console.log('已经被加载了')
          }
         UNSAFE_componentWillUpdate(){
              console.log('将要被更新了')
          }
          change=()=>{
            this.setState({a:2})
          }
          render(){
              return(
                  <div>新生命周期
                    <button onClick={this.change}>更新数据</button>
                    <A msg={this.state.a}/>
                    </div>
              )
          }
      }
      
      class A extends React.Component{
         UNSAFE_componentWillReceiveProps(){
              console.log('将要接收')
          }
          render(){
              return(
                  <div>我是组件a</div>
              )
          }
      }
      ReactDOM.render(<MyComponent/>,document.getElementById('test'))
        </script>
</body>
</html>